<script>
import {getUser} from "../utils/utils";

export default {
  name: "PersonalCenter",
  data(){
    return{
      user:{},
      form:{
        id:'',
        name:'',
        phone:'',
        age:'',
        eMail:''
      }
    }
  },
  methods:{
    update(){
      this.$confirm('此操作将更新您的信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let fd=new FormData
        Object.keys(this.form).forEach(key=>{
          fd.append(key,this.form[key])
        })
        this.$axios.post('/user/update',fd).then(resp=>{
          if(resp.data.flag){
            this.user.age=this.form.age
            this.user.name=this.form.name
            window.sessionStorage.removeItem('user')
            window.sessionStorage.setItem("user",JSON.stringify(this.user));
            this.$message({
              type: 'success',
              message: resp.data.msg
            });
          }else {
            this.$message({
              type: 'error',
              message: resp.data.msg
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消操作'
        });
      });
    }
  },
  created() {
    this.user=getUser()
    this.form.id=this.user.id
    this.form.name=this.user.name
    this.form.phone=this.user.phone
    this.form.age=this.user.age
    this.form.eMail=this.user.email
  }
}
</script>

<template>
<div>
<el-button type="primary" @click="$router.push('/UserView/UserIndex/photo')">返回主界面</el-button>
<el-button type="primary" @click="update">更新账号信息</el-button>
  <div class="show">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
      </div>
      <div class="text item">
        <div class="itemuse">
          <img :src="user.headphoto" class="user-avatar" v-if="user.headphoto!==null">
          <img src="http://192.168.138.131:9000/picture/headPhoto.png" class="user-avatar" v-if="user.headphoto===null">
        </div>
        <el-divider content-position="right">{{user.name}}</el-divider>
        <p>登录账号：{{user.username}}</p>
        <!--<p>姓名：{{user.name}}</p>-->
        姓名：<el-input style="width: 80%" v-model="form.name" placeholder="请输入姓名"></el-input>
        <br>
        <p>手机号：{{user.phone}}</p>
        <!--手机：<el-input type="number" style="width: 80%" v-model="form.phone" placeholder="请输入手机号"></el-input>-->
        <!--<br>-->
        <!--<p>年龄：{{user.age}}</p>-->
        年龄：<el-input type="number" style="width: 80%" v-model="form.age" placeholder="请输入年龄"></el-input>
        <!--<br>-->
        <p>邮箱：{{user.email}}</p>
        <!--邮箱：<el-input style="width: 80%" v-model="form.eMail" placeholder="请输入邮箱"></el-input>-->
      </div>
    </el-card>
  </div>
</div>
</template>

<style scoped>

.user-avatar {
  cursor: pointer;
  width: 210px;
  height: 210px;
  border-radius: 10px;
}
.itemuse{
  display: flex;
  justify-content: center; /* 水平居中 */
}
</style>
